<template>
	<view>
		<simple-toolbar :title="$t('asset.extract.assetExtract')">
			<view class="update" v-if="userInfo.user_type != 1 && !userInfo.autowithdraw">
				<view class="button" @click="editExtract">
					<image src="../../../static/create.png"></image>
					<text>{{ $t('asset.extract.newExtract') }}</text>
				</view>
			</view>
		</simple-toolbar>
		
		<view class="pad-base table">
			<nav-tab @change-current-tab="getExtractList" @ready="getExtractList" />
			
			<el-table :data="formData" style="width: 100%">
				<el-table-column align="center" prop="id" :label="$t('asset.extract.id')"></el-table-column>
				<el-table-column align="center" prop="coin_name" :label="$t('wallet.wallet.coin')">
					<!-- <template slot-scope="scope">
						<text>{{coinList[scope.row.coin - 1].coin_name}}</text>
					</template> -->
				</el-table-column>
				<el-table-column align="center" prop="user_email" :label="$t('asset.extract.userEmail')"></el-table-column>
				<el-table-column align="center" prop="amount" :label="$t('asset.extract.amount')"></el-table-column>
				<el-table-column align="center" prop="create_time" :label="$t('asset.extract.create_time')" width="400"></el-table-column>
				<el-table-column align="center" prop="status" :label="$t('asset.extract.status')" v-if="userInfo.user_type == 1">
					<template slot-scope="scope">
						<text :class='scope.row.status'>{{ $t(statusDic[scope.row.status]) }}</text>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="status" :label="$t('asset.extract.status')" width="120" v-else>
					<template slot-scope="scope">
						<view v-if="['cancelled', 'completed', 'rejected'].indexOf(scope.row.status) !== -1"  :class='scope.row.status'>{{$t(statusDic[scope.row.status])}}</view>
						<el-dropdown v-else @command="handleCommand($event, scope.row)">
						  <span class="el-dropdown-link">
						    {{$t(statusDic[scope.row.status])}}<i class="el-icon-arrow-down el-icon--right"></i>
						  </span>
						  <el-dropdown-menu slot="dropdown">
						    <el-dropdown-item command="cancelled" v-if="scope.row.status != 'cancelled'">{{$t(actionDic['cancelled'])}}</el-dropdown-item>
						  </el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		applyExtract,
		applyExtractAdmin
	} from "../../../js_sdk/uni-admin/asset.js"
	const statusDic = {
		'cancelled': 'asset.status.cancelled',
		'completed': 'asset.status.completed',
		'rejected': 'asset.status.rejected',
		'pending': 'asset.status.pending'
	}
	const actionDic = {
		'cancelled': 'asset.action.cancelled',
		'completed': 'asset.action.completed',
		'rejected': 'asset.action.rejected',
	}
	export default {
		data() {
			return {
				statusDic,
				actionDic,
				// coinList: [],
				formData: []
			}
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		methods: {
			editExtract() {
				uni.navigateTo({
					url: `./editExtract`
				})
			},
			async getExtractList(data = { coin: 1 }) {
				this.data = data
				let res = undefined
				try{
					if (this.userInfo.user_type === 1) {
						res = await applyExtractAdmin('get', data)
					} else {
						res = await applyExtract('get', data)
					}
					this.formData = res.data
					this.formData.forEach(item => {
						item.amount = this.$utils.retain12(item.amount)
						item.create_time = this.$utils.formatDate(item.create_time)
					})
				}catch(e){
					this.formData = []
				}
			},
			handleCommand(status, item) {
				uni.showModal({
					title: this.$t('global.prompt'),
					content: this.$t('global.areYouSure'),
					cancelText: this.$t('global.cancel'),
					confirmText: this.$t('global.determine'),
					success: async (res) => {
						if (res.confirm) {
							try{
								let data = {
									id: item.id,
									status: status
								}
								let res = await applyExtract('put', data)
								this.getExtractList()
							}catch(e){
								//TODO handle the exception
							}
						}
					}
				})
			}
		},
		onShow() {
			// this.coinList = uni.getStorageSync('coinList')
			// this.getExtractList(this.data)
		}
	}
</script>

<style lang="scss" scoped>
	// 取消黑 提款成功 拒绝提款红
	.cancelled {
		color: #3B3E66;
	}
	.completed {
		color: #12A234;
	}
	.rejected {
		color: #E02020;
	}
	.pending {
		color: #3B3E66;
	}
	
	.update {
		display: flex;
		justify-content: space-between;
	
		.button {
			// width: 36.32rpx;
			// height: 8.59rpx;
			color: #12A234;
			border: 1px solid #12A234;
			padding: 3.12rpx 5.46rpx;
			display: flex;
			justify-content: space-between;
			cursor: pointer;
	
			image {
				display: inline-block;
				width: 8.59rpx;
				height: 7.81rpx;
				margin-right: 3.12rpx;
			}
	
			text {
				display: inline-block;
				font-size: 6.25rpx;
				font-weight: 500;
			}
	
			&:last-child {
				margin-left: 6.25rpx;
			}
	
			&:hover {
				background-color: #E7F6EB;
			}
		}
	}
</style>